<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    body {
      background: url('background/background-login.png') no-repeat center center fixed;
      background-size: cover;
    }
    @keyframes slide-in-up {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    #login_box {
      width: 30%;
      height: 400px;
      background-color: rgb(255, 255, 255,0.38);
      margin: 10% auto auto;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
      animation: slide-in-up 0.5s ease-in-out forwards;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    h3 {
      color: whitesmoke;
    }
    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #40fff8, #b6ff7d);
    }
    button:hover {
      background-image: linear-gradient(to right, rgba(43, 255, 247, 0.45), #40fff8);
      color: #868c8c;
    }
    input::placeholder {
      color: #948f8f;
    }
    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
    ::placeholder
    {
      color: beige;
    }

  </style>
</head>
<body>
<div id="login_box">
  <form id="loginForm">
    <div id="input_box">
      <h2>LOGIN</h2>
      <label>
        <input type="text" placeholder="请输入用户名" name="user">
      </label>
    </div>
    <div class="input_box">
      <label>
        <input type="password" placeholder="请输入密码" name="pwd">
      </label>
    </div>
    <button type="button" id="btn">登录</button>
  </form>
  <br><br>
  <h3>还没有账号？去<a href="register.html">注册</a></h3>
  </form>
</div>
<p id="err_msg"></p>

<script>

  $("#btn").click(function () {
    $.get("toLogin?",$("#loginForm").serialize(),function(res){
      alert(res.message);
      if (res.flag){
        console.log(res);
        location.href = "main.html";
      } else {
        console.log(res);
      }
    },"json");
  });

</script>
</body>
</html>